<template>
    <div class="page" data-page="editCard" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">定制</div>
            <a href="#" class="link " @click="saveEditCard">
                <span class="iconfont icon-duigou"></span>
            </a> 
        </div>
        <div class="page-content editCard-content">
            <div class="block-title editCard-title editCard-color">首页组件</div>
            <div class="card-tip">通过<i class="add-card card-tip-icon" ></i><i class="del-card card-tip-icon" style="margin-right: 6px;"></i>来增减您的首页组件;拖动<i class="drag-card card-tip-icon1"></i>来排序</div>
            <div class="editCard-tip" id="default-card"><i class="pushpin-card"></i>安全指数</div> 
            <div class="line-split"></div>
            <div class="list sortable sortable-enabled editCard-body" style="margin: 16px 0">
                <ul class="editCard-ul">
                    {{#each hasAddCards}}
                    <li id="sortLi-{{this.objectTypeId}}">
                        <div class="item-content">
                            <div class="item-media" style="margin-left:9px;" id="btn-{{this.objectTypeId}}"><i class="del-card" ></i></div>
                            <div class="item-inner item-editCard" style="margin-left:8px;">
                                <div class="item-title">{{this.name}}</div>
                            </div>
                        </div>
                        <div class="sortable-handler"><i class="hover-color drag-card card-tip-icon1"></i></div>
                    </li>
                    {{/each}}
                </ul>
            </div>
            <div class="line-split"></div>
            <div class="block-title editCard-title editCard-color" id="performLanguage">更多可添加组件</div>
            <div class="list sortable sortable-tobeadd">
                <ul class="editCard-ul">
                    {{#each noAddCards}}
                    <li id="sortLi-{{this.objectTypeId}}">
                        <div class="item-content">
                            <div class="item-media" style="margin-left:9px;" id="btn-{{this.objectTypeId}}"><i class="add-card"></i></div>
                            <div class="item-inner item-editCard" style="margin-left:8px;">
                                <div class="item-title">{{this.name}}</div>
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </div>
</template>
<style scoped>
/*drag-card-hovor*/
    .hover-color:hover{
        background: url("./img/home/drag.png");
    }
    .card-tip-icon1{
        display: inline-block;
        width: 24px;
        height: 14px;
        margin-left: 6px;
    }
    .card-tip-icon{
        display: inline-block;
        width: 16px;
        height: 15px;
        margin-left: 6px;
    }
    .card-tip{
        text-align: center;
        color: #999999;
        font-size: 14px;
    }
    .editCard-tip{
        margin-top: 32px;
        margin-bottom: 16px;
        padding-left: 23px;
        color: #333333;                                                                                                                                                                                                                                               
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .editCard-color{
        color: #333333;
        font-size: 16px;
        font-weight: bold;
    }
    ul.editCard-ul:before, ul.editCard-ul:after, .item-editCard:after {
        background-color: transparent !important;
    }
    .line-split {
        height: 1px;
        width: 92%;
        margin: 0 auto;
    }
    .editCard-title {
        /*margin: 25px 16px;*/
        text-align: center;
        font-size: 18px;
        line-height: 23px;
    }
    .editCard-ul .sortable-handler{
        width: 50px;
        line-height: 50px;
        text-align: left;
        color: #f8b728;
        font-size: 14px;
        background-image:none;
    }
</style>
<script>
    return {
        beforeCreate() {
            var self = this;
            self.getCards();
            self.getnocards();
        },
        data: function () {
            return {
                allData: [],
                deleData: [],
                hasAddCardsId: [],  //已添加卡片id
                hasAddCards: [],  //已添加卡片数组
                noAddCards: [],  //待添加数组
                allCardsData:[] //所有卡片数据
            }
        },
        methods: {
            getCurrentItemIds: function () {
                var self = this;
                var arr = [];
                var $lis = jQuery(".sortable-enabled ul li");
                jQuery.each($lis, function (index, obj) {
                    arr.push(obj.id.split("-")[1]);
                })
                return arr;
            },
            getAddOrDelId: function (e) {
                return e.currentTarget.id.split("-")[1];
            },
            getCards: function () {
                var self = this;
                var $ = self.$$;
                var orgId="";
                if(single_Orgid.toString().indexOf(",")==-1){
                    orgId=single_Orgid;
                }else{
                    orgId="";
                }
                Dao.unitStateList({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    userAccount: userInfor.accountName,
                    isMuilUnitUser: userInfor.isMuilUnitUser,
                    status: 1,
                    orgCode:platformCode || app.data.defaultPlatCode,
                    orgId:orgId
                }, function (data) {
                    if(data && data.length>0){
                        self.allData = JSON.parse(JSON.stringify(data).replace(/id/g, "objectTypeId"));
                        jQuery.each(self.allData, function (index, obj) {
                            self.hasAddCards.push(obj);
                            self.hasAddCardsId.push(obj.objectTypeId);
                            self.allCardsData[obj.objectTypeId] = obj;
                        });
                    }
                }, false);
            },
            getnocards: function () {
                var self = this;
                var $ = self.$$;
                var orgId="";
                if(single_Orgid.toString().indexOf(",")==-1){
                    orgId=single_Orgid;
                }else{
                    orgId="";
                }
                Dao.unitStateList({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    userAccount: userInfor.accountName,
                    isMuilUnitUser: userInfor.isMuilUnitUser,
                    status: 0,
                    orgCode:platformCode || app.data.defaultPlatCode,
                    orgId:orgId
                }, function (data) {
                    self.deleData = JSON.parse(JSON.stringify(data).replace(/id/g, "objectTypeId"));
                    jQuery.each(self.deleData, function (index, obj) {
                        self.noAddCards.push(obj);
                        self.allCardsData[obj.objectTypeId] = obj;
                    })
                }, false);
            },
            /* cancelEditCard: function () {
                var self = this;
                var $ = self.$$;
                //如果最终数组和开始不一样，则提示保存
                if (JSON.stringify(this.getCurrentItemIds()) != JSON.stringify(self.hasAddCardsId)) {
                    self.openConfirm();
                } else {
                    app.router.back();
                }
            }, */
            saveEditCard: function () {
                var self = this;
                var $ = self.$$;
                var newAddIds = this.getCurrentItemIds();

                // 新数组和之前已经添加的数组不同
                if (JSON.stringify(newAddIds) != JSON.stringify(self.hasAddCardsId)){
                    //获取添加卡片数组数据
                    var newSortArr = [];
                    for(var i=0;i<newAddIds.length;i++){
                        newSortArr.push(self.allCardsData[newAddIds[i]]);
                    }
                    newSortArr = newSortArr.concat(self.deleData);
                    var newOrder = 1;
                    jQuery.each(newSortArr,function(index, el) {
                        el.orderNum = newOrder;
                        newOrder++;
                    });
                    Dao.saveCard({
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        userAccount: userInfor.accountName,
                        isMuilUnitUser : userInfor.isMuilUnitUser,
                        cardInfo: JSON.stringify(newSortArr)
                    }, function (data) {
                        app.router.back();
                        app.dialog.progress("重置卡片...");
                        //多单位看板
                        app.ptr.refresh(".home-content");
                        //维保看板
                        app.ptr.refresh(".maintenceKanban-content");
                        jQuery(".page-content").scrollTop(0,300);
                        setTimeout(function () {
                          app.dialog.close();
                        }, 1000);
                    })
                } else {
                    app.router.back();
                }
            },
            delAdded: function (e) {
                var self = this;
                var id = this.getAddOrDelId(e);
                jQuery("#sortLi-" + id).remove();
                var newObj = {};
                jQuery.each(self.allData, function (index, obj) {
                    if (obj.objectTypeId == id) {
                        newObj = obj;
                        common.deleteArrByEle(self.allData, newObj);
                        newObj["status"] = 0;
                        self.deleData = self.deleData.concat(newObj);
                        return false;
                    }
                });
                if (self.allData!=0){
                    $("#performLanguage").html("更多小组件");
                }
                jQuery(".sortable-tobeadd ul").append(
                        '<li id="sortLi-' + id + '">'
                        + '<div class="item-content">'
                        + '<div class="item-media" style="margin-left:9px;" @click="newAdded" id="btn-' + id + '"><i class="add-card"></i></div>'
                        + '<div class="item-inner item-editCard" style="margin-left:8px;">'
                        + '<div class="item-title">' + newObj.name + '</div>'
                        + '</div>'
                        + '</div>'
                        + '</li>');
                jQuery(".sortable-tobeadd ul li div.item-media").off("click").bind("click", function (e) {
                    self.newAdded(e);
                });
            },
            newAdded: function (e) {
                var self = this;
                var id = this.getAddOrDelId(e);
                jQuery("#sortLi-" + id).remove();
                var newObj = {};
                jQuery.each(self.deleData, function (index, obj) {
                    if (obj.objectTypeId == id) {
                        newObj = obj;
                        common.deleteArrByEle(self.deleData, newObj);
                        newObj["status"] = 1;
                        self.allData = self.allData.concat(newObj);
                        return false;
                    }
                });
                if (self.deleData.length == 0) {
                    $("#performLanguage").html("暂无更多小组件");
                }
                jQuery(".sortable-enabled ul").append(
                        '<li id="sortLi-' + id + '">'
                        + '<div class="item-content">'
                        + '<div class="item-media" style="margin-left:9px;" @click="delAdded" id="btn-' + id + '"><i class="del-card" ></i></div>'
                        + '<div class="item-inner item-editCard" style="margin-left:8px;">'
                        + '<div class="item-title">' + newObj.name + '</div>'
                        + '</div>'
                        + '</div>'
                        + '<div class="sortable-handler"><i class="drag-card card-tip-icon1"></i></div>'
                        + '</li>');
                jQuery(".sortable-enabled ul li div.item-media").off("click").bind("click", function (e) {
                    self.delAdded(e);
                });
            },
            openConfirm: function () {
                var self = this;
                var $ = self.$$;
                //如果最终数组和开始不一样，则提示保存
                if (JSON.stringify(this.getCurrentItemIds()) != JSON.stringify(self.hasAddCardsId)) {
                    var app = this.$app;
                    app.params.dialog.buttonCancel = "取消";
                    app.params.dialog.buttonOk = `<span style='color:red;'>不保存</span>`;
                    app.dialog.confirm("你添加的卡片还未保存", "提示",function () {
                        //不保存,页面返回
                        app.methods.backToTab()
                    }, function () {
                        //取消，什么都不做
                    });
                }else{
                    return true;
                }
            }
        },
        on: {
            pageAfterIn: function (e, page) {
                var self = this;
                var app = self.$app;
                var $ = self.$;
                if(userInfor.isMuilUnitUser==1){
                    $("#default-card").hide();
                }else{
                    $("#default-card").show();
                }
                jQuery(".sortable-enabled ul li div.item-media").off("click").bind("click", function (e) {
                    self.delAdded(e);
                });
                jQuery(".sortable-tobeadd ul li div.item-media").off("click").bind("click", function (e) {
                    self.newAdded(e);
                });
            },
        }
    }
</script>